<template>
  <div v-permission="['base-data:member-coupon:query']">
    <page-wrapper content-full-height fixed-height>
      <!-- 数据列表 -->
      <vxe-grid
        id="MemberCoupon"
        ref="grid"
        resizable
        show-overflow
        highlight-hover-row
        keep-source
        row-id="id"
        :proxy-config="proxyConfig"
        :columns="tableColumn"
        :toolbar-config="toolbarConfig"
        :custom-config="{}"
        :pager-config="{}"
        :loading="loading"
        height="auto"
      >
        <!-- 搜索表单 -->
        <template #form>
          <j-border>
            <j-form bordered label-width="80px" @collapse="grid.refreshColumn()">
              <j-form-item label="卡券类型">
                <a-radio-group v-model:value="searchFormData.couponType" @change="search">
                  <a-radio-button
                    v-for="item in _This().$enums.COUPON_TYPE.values()"
                    :key="item.code"
                    :value="item.code"
                  >
                    {{ item.desc }}
                  </a-radio-button>
                </a-radio-group>
              </j-form-item>
              <j-form-item label="发放方式">
                <a-select v-model:value="searchFormData.sendWay" placeholder="全部" allow-clear>
                  <a-select-option
                    v-for="item in _This().$enums.SEND_WAY.values()"
                    :key="item.code"
                    :value="item.code"
                  >
                    {{ item.desc }}
                  </a-select-option>
                </a-select>
              </j-form-item>
              <j-form-item label="卡券状态">
                <a-select
                  v-model:value="searchFormData.couponStatus"
                  mode="multiple"
                  placeholder="全部"
                  allow-clear
                >
                  <a-select-option
                    v-for="item in _This().$enums.COUPON_STATUS.values()"
                    :key="item.code"
                    :value="item.code"
                  >
                    {{ item.desc }}
                  </a-select-option>
                </a-select>
              </j-form-item>
            </j-form>
          </j-border>
        </template>
        <!-- 工具栏 -->
        <template #toolbar_buttons>
          <a-space>
            <a-button type="primary" @click="search" :loading="loading">查询</a-button>
          </a-space>
        </template>

        <!-- 卡券类型 列自定义内容 -->
        <template #couponType_default="{ row }">
          {{ _This().$enums.COUPON_TYPE.getDesc(row.couponType) }}
        </template>

        <!-- 发放方式 列自定义内容 -->
        <template #sendWay_default="{ row }">
          {{ _This().$enums.SEND_WAY.getDesc(row.sendWay) }}
        </template>

        <!-- 状态 列自定义内容 -->
        <template #couponStatus_default="{ row }">
          {{ _This().$enums.COUPON_STATUS.getDesc(row.couponStatus) }}
        </template>
      </vxe-grid>
    </page-wrapper>
  </div>
</template>

<script setup lang="ts">
  import { ref, getCurrentInstance } from 'vue';
  import { VxeTableDefines, VxeGridPropTypes } from 'vxe-pc-ui';
  import * as api from '@/api/base-data/member-coupon';

  // 组件参数
  const props = defineProps({
    // 会员ID
    memberId: {
      type: String,
      required: true,
    },
  });

  // this对象
  const instance: any = getCurrentInstance();

  // 表格对象
  const grid = ref();

  // 列表数据加载状态
  const loading = ref(false);

  // 请求接口配置
  const proxyConfig = ref<VxeGridPropTypes.ProxyConfig>({
    props: {
      // 响应结果列表字段
      result: 'datas',
      // 响应结果总条数字段
      total: 'totalCount',
    },
    ajax: {
      // 查询接口
      query: ({ page, sorts }) => {
        const params = buildQueryParams(page, sorts);
        return api.query(params);
      },
    },
  });

  // 列表数据配置
  const tableColumn = ref<VxeTableDefines.ColumnOptions[]>([
    { type: 'checkbox', width: 45 },
    { field: 'couponName', title: '卡券名称', minWidth: 200 },
    {
      field: 'couponType',
      title: '卡券类型',
      minWidth: 200,
      slots: { default: 'couponType_default' },
    },
    { field: 'sendWay', title: '发放方式', minWidth: 200, slots: { default: 'sendWay_default' } },
    {
      field: 'totalValue',
      title: '总面值',
      minWidth: 200,
      formatter: (data) => formatAmount(data),
    },
    {
      field: 'allowValue',
      title: '剩余面值',
      minWidth: 200,
      formatter: (data) => formatAmount(data),
    },
    {
      field: 'couponStatus',
      title: '卡券状态',
      minWidth: 200,
      slots: { default: 'couponStatus_default' },
    },
    { field: 'createTime', title: '创建时间', width: 170 },
    { field: 'updateTime', title: '修改时间', width: 170 },
  ]);

  // 工具栏配置
  const toolbarConfig = ref<VxeGridPropTypes.ToolbarConfig>({
    // 自定义左侧工具栏
    slots: {
      buttons: 'toolbar_buttons',
    },
  });
  // 查询列表的查询条件
  const searchFormData = ref({
    memberId: '',
    couponType: 1,
    sendWay: null,
    couponStatus: [],
  });

  // 构建查询参数
  const buildQueryParams = (page, sorts) => {
    return {
      ..._This().$utils.buildSortPageVo(page, sorts),
      ...buildSearchFormData(),
    };
  };

  // 查询前构建具体地查询参数
  const buildSearchFormData = () => {
    return {
      ...searchFormData.value,
      memberId: props.memberId,
    };
  };

  // 搜索
  const search = () => {
    grid.value.commitProxy('reload');
  };

  // 格式化金额
  const formatAmount = (data) => {
    let num = typeof data === 'number' ? data : data?.cellValue;
    return '￥ ' + Number.parseFloat(num || 0).toFixed(2);
  };
  // 格式化百分比
  const formatPercentage = (data) => {
    return Number.parseFloat(data?.cellValue || 0).toFixed(2) + ' %';
  };
  // 格式化日
  const formatDay = (data) => {
    let day = Number.parseFloat(data?.cellValue || 0);
    return day ? day + ' 天' : '永久';
  };

  // 组件实例对象
  const _This = () => {
    return instance.appContext.config.globalProperties;
  };

  // 暴露方法
  defineExpose({
    search,
  });
</script>

<style scoped></style>
